<template>
	<view class="index_box">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2000" duration="500" indicator-color="#999999" indicator-active-color="#FFCD00">
			<swiper-item v-for="item in product.productMasterDiagram" v-if="item">
				<view class="swiper-item uni-bg-red"><image :src="item"></image></view>
			</swiper-item>
		</swiper>
		<view class="attractions_box">
			<view class="block1">
				<view class="tit dis_fx fx_column"><view class="tag">{{product.productTypeName}}</view><text>{{product.productName}}</text></view>
				<view class="type">({{product.productSubtitle}})</view>
				<view class="dis_fx fx_between fx_column"><view class="price">￥{{product.minPrice}}元~{{product.maxPrice}}元</view><view class="integral">200积分</view></view>
			</view>
			<view class="pt_block1">
				<view class="tit"><text>拼团信息</text></view>
				<view class="info"><text class="label">出行日期</text><text>{{order.tripBeginDate}}</text></view>
				<view class="tit_s" v-if="order.accompaniers.length>0">其他团友</view>
				<view class="info" v-for="item in order.accompaniers"><text class="label">{{item.name}}</text><text>{{item.mobilePhone}}</text></view>
			</view>
			<view class="block4" v-html="product.productDetails"></view>
			<!-- <view class="block4">
				<view class="tit dis_fx fx_between fx_column"><text>视频介绍</text></view>
				<view class="fz_0">
					<video src="https://www.mzywx.com/Uploads/Video/1500327771_zybg.mp4" width="100%"></video>
				</view>
			</view>
			<view class="block5">
				<view class="tit dis_fx fx_between fx_column"><text>图片展示</text></view>
				<view class="fz_0">
					<image src="../../static/test3.png"></image>
				</view>
				<view class="fz_0">
					<image src="../../static/test3.png"></image>
				</view>
			</view>
			<view class="prompt">
				<view class="prompt_tit">退款政策：</view>
				<text>1拼团成功后，如需申请退款，需根据实际情况补偿包括但不限于车费/房费等差额。特殊情况下，无法退款</text>
			</view> -->
		</view>
		<!-- share -->
		<!-- <view class="share"></view> -->
		<!-- btns -->
		<view class="bottom_btns">
			<view class="contact dis_fx fx_column fx_center" @click="toNewPage('/pages/customer/customer')"><view class="icon"></view><text>联系客服</text></view>
			<view class="buy" @click="buyNow()">参与拼团</view>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				orderId:'',
				order:null,
				product:null
			}
		},
		onLoad(options){
			let orderId=options.orderId;
			if(orderId){
				this.orderId=orderId
			}else{
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onShow() {
			this.getOrderDetail();
			
		},
		methods: {
			//获取订单信息
			getOrderDetail(){
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var that=this;
				var params={
					orderId:that.orderId
				}
				util.fetchGet('/order/view/'+that.orderId,params,function(res){
					let order=res.data
					order.tripBeginDate=util.formatDate(new Date(order.tripBeginDate),"yyyy-MM-dd");
					order.tripEndDate=util.formatDate(new Date(order.tripEndDate),"yyyy-MM-dd");
					that.order=order
					var product=order.product;
					product.productMasterDiagram=product.productMasterDiagram.split(",");
					that.product=product;
					uni.hideLoading();
				},function(){},false)
			},
			
			//立即购买
			buyNow () {
				var that=this;
				var url='/pages/order/teamBuy/teamBuy?productId='+that.product.productId+"&hasadultQty="+that.order.adultQty+"&tripBeginDate="+that.order.tripBeginDate
				// var url='/pages/order/teamBuy/teamBuy?productId='+that.product.productId+"&hasadultQty="+that.order.adultQty+"&tripBeginDate=2019-05-17"
				that.toNewPage(url)
			},
			toNewPage(url) {
				uni.navigateTo({url});
			},
			
		}
	}
</script>

<style>
	.index_box swiper,.index_box swiper image{
		width: 100%;
		height: 354upx;
	}
	.attractions_box{
		padding: 0 24upx 200upx;
	}
	.attractions_box .block1 .tit .tag{
		background: #FC5C1D;
		color: #fff;
		font-size: 23upx;
		width: 140upx;
		height: 46upx;
		line-height: 46upx;
		border-radius: 23upx;
		text-align: center;
	}
	.attractions_box .block1 .tit text{
		color: #333;
		font-size: 28upx;
		width: 533upx;
		margin-left: 21upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.attractions_box .block1 .type{
		font-size: 24upx;
		color: #999999;
		margin: 20upx 0 30upx;
	}
	.attractions_box .block1 .price{
		font-size: 36upx;
		color: #FFC800;
	}
	.attractions_box .block1 .integral{
		color: #999999;
		font-size: 24upx;
	}
	.attractions_box .block2{
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		padding: 24upx;
		margin-top: 50upx;
	}
	.attractions_box .block2 .tit>text{
		font-size: 28upx;
		font-weight: normal;
	}
	.attractions_box .tit{
		margin-bottom: 20upx;
	}
	.attractions_box .tit>text{
		color: #333333;
		font-size: 32upx;
		font-weight: 600;
	}
	.attractions_box .tit .more{
		color: #FFC800;
		font-size: 24upx;
	}
	.attractions_box .tit .more .icon{
		background: url() no-repeat center/contain;
		width: 12upx;
		height: 26upx;
		margin-left: 10upx;
	}
	.attractions_box .block4{
		padding-bottom: 50upx;
	}
	.attractions_box .block4 video{
		width: 100%;
	}
	.attractions_box .block5 image{
		width: 100%;
		height: 300upx;
		border-radius: 10upx;
		margin-bottom: 30upx;
	}
	.attractions_box .prompt .prompt_tit{
		font-size: 28upx;
		color: #333333;
	}
	.attractions_box .prompt text{
		font-size: 24upx;
		color: #757575;
	}
	.share{
		background: url() no-repeat center/contain;
		width: 90upx;
		height: 90upx;
		position: fixed;
		right: 10upx;
		bottom: 300upx;
	}
	.bottom_btns{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		z-index: 3;
	}
	.bottom_btns .contact{
		width: 240upx;
		color: #fff;
		background: #FC5C1D;
		height: 100%;
		font-size: 28upx;
	}
	.bottom_btns .contact .icon{
		width: 31upx;
		height: 32upx;
		background: url() no-repeat center/contain;
		margin-right: 10upx;
	}
	.bottom_btns .buy{
		height: 100%;
		width: 510upx;
		background: #FFC800;
		color: #333333;
		font-size: 36upx;
		text-align: center;
	}
	.pt_block1{
		box-shadow: 0 0 18px 0 rgba(106, 79, 13, 0.12);
		padding: 24upx;
		border-radius: 10upx;
		margin: 50upx 0;
		line-height: 2;
	}
	.pt_block1 .info{
		font-size: 24upx;
		color: #757575;
	}
	.pt_block1 .info .label{
		width: 200upx;
		display: inline-block;
	}
	.pt_block1 .tit_s{
		font-size: 28upx;
		color: #333;
	}
</style>
